<template>
    <div class="hello">
        <el-table
                :data="tableData"
                stripe
                style="width: 100%">
            <el-table-column
                    prop="orderNo"
                    label="订单号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="orderSource"
                    label="订单来源"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="createrUser"
                    label="创建人">
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
    // import orderList from '../mock/orderListMock'
    export default {
        name: 'tableData',
        data() {
            return {
                tableData: []
            }
        },
        mounted() {
            this.getOrderList()
        },
        methods: {
            getOrderList() {
                let self = this
                // 这里面向后端发请求取数据 可以使用原生 fetch 去发请求
                fetch('http://localhost:8085/user/list3').then(function (data) { //get 请求
                    return data.text();  // 通过调用text返回promise对象
                }).then(function (data) { // 后端返回的 订单数据
                    self.tableData = JSON.parse(data)
                })
                // this.tableData = orderList
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    h3 {
        margin: 40px 0 0;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        display: inline-block;
        margin: 0 10px;
    }

    a {
        color: #42b983;
    }
</style>
